<template>
	<view style="width: 100%;display: flex;flex-direction: column;">
		<view
			style="width: 100%;display: flex;justify-content: center;color: #d3d3d3;font-size: 20rpx;margin-top: 20rpx;"
			v-if="index%8 == 0">
			{{$u.timeFormat(info.time, 'mm-dd hh:MM:ss')}}
		</view>
		<view v-if="$store.state.user.user.id != info.uid" style="width: 100%;display: flex;padding: 15rpx;">
			<u-avatar @click="gofriend" mode="square" size="80"
				:src="$store.state.common.systemInfo.fileurl + 'avatar/' + info.toid + '.jpg'"></u-avatar>
			<zb-popover placement="top-start" type="longpress" :handleLongpress="handleLongpress" :options="actionss"
				ref="Popover" @select="csitemfunc" actionsDirection="horizontal" style="">
				<view style="width: 100%;display: flex;">
					<image src="/static/images/leftc.png" style="width: 25rpx;position: relative;left: 7rpx;top: 10px;"
						mode="widthFix"></image>
					<view style="width: 350rpx;display: flex;flex-direction: column;background: white;">
						<view
							style="width: 350rpx;display: flex;flex-wrap: wrap;white-space: pre-wrap;border-radius: 8rpx;background: white;align-items: center;padding: 15rpx;padding-bottom: 0rpx;justify-content: space-between;">
							<view style="display: flex;align-items: center;">
								<image src="/static/images/ysb.png" style="width: 80rpx;height: 80rpx;" mode=""></image>
								<view style="display: flex;flex-direction: column;margin-left: 6rpx;">
									<view class="u-line-1" style="width: 160rpx;">
										{{info.note}}
									</view>
									<view style="margin-top: 5rpx;font-size: 24rpx;">
										{{formatBytes(info.timelong)}}
									</view>
								</view>
							</view>
							<view @click="dldfile" class="">
								<image src="/static/images/ddld.png" style="width: 50rpx;height: 50rpx;" mode="">
								</image>
							</view>
						</view>
						<view style="width: 100%;padding-left: 10rpx;padding-right: 10rpx;" v-if="percent > 0">
							<u-line-progress active-color="#4e68a1" :show-percent="false" height="6"
								:percent="percent"></u-line-progress>
						</view>
						<view style="width: 100%;padding-left: 10rpx;padding-right: 10rpx;height: 15rpx;" v-else>

						</view>
					</view>
				</view>
			</zb-popover>
		</view>

		<view v-else style="width: 100%;display: flex;padding: 15rpx;flex-direction: row-reverse;">

			<u-avatar mode="square" size="80"
				:src="$store.state.common.systemInfo.fileurl + 'avatar/' + info.toid + '.jpg'"></u-avatar>
			<zb-popover placement="top-end" type="longpress" :handleLongpress="handleLongpress" :options="actions"
				ref="Popover" @select="csitemfunc" actionsDirection="horizontal" style="">
				<view style="width: 100%;display: flex;flex-direction: row-reverse;">
					<image src="/static/images/rightc.png"
						style="width: 25rpx;position: relative;right: 7rpx;top: 10px;" mode="widthFix"></image>
					<view
						style="width: 380rpx;display: flex;flex-direction: column;background: #cff1ff;padding: 15rpx;">
						<view
							style="width: 350rpx;min-height: 80rpx;display: flex;flex-wrap: wrap;white-space: pre-wrap;border-radius: 8rpx;align-items: center;justify-content: space-between;">
							<view style="display: flex;align-items: center;">
								<image src="/static/images/ysb.png" style="width: 80rpx;height: 80rpx;" mode=""></image>
								<view style="display: flex;flex-direction: column;margin-left: 6rpx;">
									<view class="u-line-1" style="width: 160rpx;">
										{{info.note}}
									</view>
									<view style="margin-top: 5rpx;font-size: 24rpx;">
										{{formatBytes(info.timelong)}}
									</view>
								</view>
							</view>
							<view @click="dldfile" class="">
								<image src="/static/images/ddld.png" style="width: 50rpx;height: 50rpx;" mode="">
								</image>
							</view>
						</view>
						<view style="width: 100%;" v-if="percent > 0">
							<u-line-progress active-color="#4e68a1" :show-percent="false" height="6"
								:percent="percent"></u-line-progress>
						</view>
					</view>
				</view>
			</zb-popover>
		</view>


	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	import {
		pub
	} from '@/common/event';
	import moment from 'moment';
	export default {
		data() {
			return {
				actionss: [{
						text: '转发',
					},
					{
						text: '收藏',
					},
				],
				actions: [{
						text: '转发',
					},
					{
						text: '撤回',
					},
					{
						text: '收藏',
					},
				],
				percent: 0
			}
		},
		mounted() {
			if (moment().valueOf() - this.info.time > 60000) {
				this.actions = [{
						text: '转发',
					},
					{
						text: '收藏',
					},
				]
			}
		},
		props: {
			info: {
				type: Object,
				default: () => {
					return {}
				}
			},
			index: {
				type: Number,
				default: 0
			}
		},
		computed: {
			...mapState({
				list: (state) => {

				}
			})
		},
		methods: {
			formatBytes: function(bytes, decimals = 2) {
				if (bytes === 0) return '0 Bytes';
				const k = 1024;
				const dm = decimals < 0 ? 0 : decimals;
				const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
				const i = Math.floor(Math.log(bytes) / Math.log(k));
				return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
			},
			dldfile: function() {
				const _this = this
				const src = this.$store.state.common.systemInfo.fileurl + this.info.content
				// #ifdef APP
				const downloadTask = uni.downloadFile({
					url: src,
					success: (res) => {
						if (res.statusCode === 200) {
							console.log('下载成功', res);
							_this.percent = 0

							uni.openDocument({
								filePath: res.tempFilePath
							})

						}
					}
				});

				downloadTask.onProgressUpdate((res) => {
					console.log('下载进度' + res.progress);
					console.log('已经下载的数据长度' + res.totalBytesWritten);
					console.log('预期需要下载的数据总长度' + res.totalBytesExpectedToWrite);
					this.percent = res.progress
				});
				// #endif

				// #ifdef H5
				location.href = src
				// #endif
			},
			handleLongpress: function(e) {
				console.log(e)
				if (moment().valueOf() - this.info.time > 60000) {
					this.actions = [{
							text: '转发',
						},
						{
							text: '收藏',
						},
					]
				}
			},
			gofriend: function() {
				const list = this.$store.state.friend.list
				const user = this.$store.state.user.user
				const ret = list.find(e => {
					return e.fid == this.info.uid
				})
				if (ret) {
					uni.navigateTo({
						url: "/pages/friend/detail?id=" + this.info.uid
					})
				} else {
					uni.navigateTo({
						url: "/pages/friend/friend?id=" + this.info.uid
					})
				}
			},
			csitemfunc: async function(ex) {
				const e = ex.text
				console.log(e)
				if (e == "转发") {
					uni.navigateTo({
						url: "/pages/friend/sharemessage?id=" + this.info.id
					})
				}
				if (e == "撤回") {
					const ret = await this.$u.delete(`chat/chat/removemessage/${this.info.id}`)
					uni.showToast({
						title: "已撤回",
					})
				}
				if (e == "收藏") {
					const ret = await this.$u.post(`chat/chat/collect`, this.info)
					pub("collect_done", ret.data)
					uni.showToast({
						title: "已收藏"
					})
				}
			},
		}
	}
</script>

<style>
</style>